<template>
	<view class="h-fill">
		<u-navbar title="角色信息" titleColor="#fff" backIconColor="#fff" :background="navBg"></u-navbar>
		<view v-if="character.id">
			<u-cell-group>
				<u-cell-item title="昵称" :value="character.nickname || '-'" :arrow="false"></u-cell-item>
				<u-cell-item title="头像" :center="true" :arrow="false">
					<image class="c-user-head" :src="userInfo.avatar || '../static/img/user.png'"></image>
				</u-cell-item>
				<u-cell-item :arrow="false" v-if="character.sex" title="性别" :value="gameSexs[character.sex].label || '-'"></u-cell-item>
				<u-cell-item :arrow="false" title="生日" :value="character.birthday || '-'"></u-cell-item>
				<u-cell-item :arrow="false" title="手机" :value="userInfo.phone || '-'"></u-cell-item>
			</u-cell-group>
		</view>
	</view>
</template>

<script>
	import {getMyCharacter} from "../api/game.js"
	import {mapState} from "vuex"
	import {gameSexs} from "../common/constants.js"
	export default {
		data() {
			return {
				gameSexs,
				navBg: {
					'background-image': 'linear-gradient(to right, #434AD8, #8E77F5)'
				},
				character: {}
			};
		},
		computed: {
			...mapState(["userInfo"])
		},
		onShow() {
			this.loadData();
		},
		async onPullDownRefresh() {
			await this.loadData();
			uni.stopPullDownRefresh();
		},
		methods: {
			async loadData() {
				try{
					let res = await getMyCharacter();
					if (res) {
						this.character = res;
					} else {
						uni.showModal({
							title: "您还没有创建角色",
							cancelText: "先不创建",
							confirmText: "去创建",
							success: (res) => {
								if (res.confirm) {
									uni.navigateTo({
										url: "../pagesGame/create-character"
									})
								} else {
									uni.navigateBack();
								}
							}
						})
					}
				}catch(e){
					//TODO handle the exception
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}
	.c-user-head {
		width: 120rpx;
		height: 120rpx;
		border-radius: 120rpx;
	}
</style>
